import React from 'react'
import cls from 'classnames';
import { Button, View } from '@tarojs/components';
import { ButtonProps } from '@tarojs/components/types/Button';
import { Loading } from '../Loading';
import { Icon } from '../Icon';

import './index.scss'

export enum ButtonType {
    PRI = 'primary',
    INFO = 'info',
    CANCEL = 'cancel',
    DANGE = 'danger',
    WARN = 'warning'
}

export enum ButtonSize {
    NOR = 'normal',
    LAR = 'large',
    SM = 'small',
    MN = 'mini'
}

export enum FormType {
    SUBMIT = 'submit',
    RESET = 'reset'
}
export interface IButtonProps {
    formType?: keyof ButtonProps.formType
    icon?: string
    plain?: boolean
    block?: boolean
    round?: boolean
    square?: boolean
    loading?: boolean
    hairline?: boolean
    disabled?: boolean
    loadingText?: boolean
    customStyle?: React.CSSProperties
    loadingType?: string
    type?: ButtonType
    size?: ButtonSize
    loadingSize?: string
    color?: string
    id?: string
    openType?: keyof ButtonProps.openType
    onClick?: ()=>void
    customClass?: string
}
export const ButtonEle: React.FC<ButtonProps & IButtonProps> = (props) => {
    return (

        <Button
            id={props.id}
            className={cls('xxm-button-ls', props.customClass || '',
                `xxm-button-ls--${props.type || 'default'}`,
                `xxm-button-ls--${props.size || 'normal'}`,
                {
                    'xxm-button-ls--block': props.block,
                    'xxm-button-ls--round': props.round,
                    'xxm-button-ls--plain': props.plain,
                    'xxm-button-ls--square': props.square,
                    'xxm-button-ls--loading': props.loading,
                    'xxm-button-ls--disabled': props.disabled,
                    'xxm-button-ls--hairline': props.hairline,
                    'xxm-button-ls--unclickable': props.disabled || props.loading,
                    // 'xxm-button-ls--hairline': props.hairline,
                    'xxm-hairline--surround': props.hairline
                })}
            hoverClass="xxm-button--active hover-class"
            // formType="{{ formType }}"
            formType={props.formType}
            style={{ ...props.customStyle }}
            // open-type="{{ disabled ? '' : openType }}"
            openType={props.openType}
            // business-id="{{ businessId }}"
            sessionFrom={props.sessionFrom}

            sendMessageTitle={props.sendMessageTitle}
            // send-message-title="{{ sendMessageTitle }}"
            sendMessagePath={props.sendMessagePath}

            sendMessageImg={props.sendMessageImg}

            showMessageCard={props.showMessageCard}
            appParameter={props.appParameter}
            onChooseAvatar={props.onChooseAvatar}
            onClick={()=>{
                if(!props.disabled && props.onClick){
                    props.onClick()
                }
            }}
            onGetUserInfo={props.onGetUserInfo}
            onGetPhoneNumber={props.onGetPhoneNumber}
            onOpenSetting={props.onOpenSetting}
            onError={props.onError}
            onLaunchapp={props.onLaunchapp}
        >

            {
                props.loading &&
                <React.Fragment>
                    <Loading

                        size={props.size || 24}
                        type={props.loadingType}
                    // color={props.}
                    />

                    {props.loadingText &&
                        <View className="xxm-button-ls__loading-text">
                            {props.loadingText}
                        </View>
                    }
                </React.Fragment>
            }

            {
                !props.loading &&
                <React.Fragment>
                    {
                        props.icon &&
                        <Icon
                            name={props.icon}
                            size={16}
                            customIconStyle={{ lineHeight: 'inherit' }}
                        />

                    }
                    <View className="xxm-button-ls__text">
                        {props.children}
                    </View>
                </React.Fragment>
            }
        </Button >
    )
}
